import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message, Tabs, Switch, InputNumber, Select } from 'antd';
import { SaveOutlined, MailOutlined } from '@ant-design/icons';
import './EmailSettings.css';

const { TabPane } = Tabs;
const { Option } = Select;

const EmailSettings = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [testLoading, setTestLoading] = useState(false);

  // 模拟数据加载
  useEffect(() => {
    // 这里应该是从API获取设置数据
    const mockSettings = {
      smtpHost: 'smtp.gmail.com',
      smtpPort: 587,
      smtpUsername: 'your-email@gmail.com',
      smtpPassword: 'your-password',
      senderName: '网站管理员',
      senderEmail: 'admin@example.com',
      enableSsl: true,
      enableTls: true,
      emailTemplate: 'default',
      testEmail: 'test@example.com',
      enableEmailNotification: true,
      enableWelcomeEmail: true,
      enablePasswordResetEmail: true,
      emailSignature: '此邮件由系统自动发送，请勿回复。'
    };
    form.setFieldsValue(mockSettings);
  }, [form]);

  const handleSave = async (values) => {
    setLoading(true);
    try {
      // 这里应该是调用API保存设置
      console.log('保存Email设置:', values);
      message.success('Email设置保存成功');
    } catch (error) {
      message.error('保存失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleTestEmail = async () => {
    try {
      const values = await form.validateFields(['smtpHost', 'smtpPort', 'smtpUsername', 'smtpPassword', 'testEmail']);
      setTestLoading(true);
      // 这里应该是调用API测试邮件发送
      console.log('测试邮件发送:', values);
      message.success('测试邮件发送成功，请检查收件箱');
    } catch (error) {
      if (error.errorFields) {
        message.error('请先填写完整的SMTP配置信息');
      } else {
        message.error('测试邮件发送失败，请检查配置');
      }
    } finally {
      setTestLoading(false);
    }
  };

  return (
    <div className="email-settings">
      <Card 
        title={
          <span>
            <MailOutlined /> Email设置
          </span>
        }
        className="settings-card"
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
        >
          <Tabs defaultActiveKey="smtp" type="card">
            <TabPane tab="SMTP配置" key="smtp">
              <Form.Item
                name="smtpHost"
                label="SMTP服务器地址"
                rules={[{ required: true, message: '请输入SMTP服务器地址' }]}
              >
                <Input placeholder="smtp.gmail.com" />
              </Form.Item>

              <Form.Item
                name="smtpPort"
                label="SMTP端口"
                rules={[{ required: true, message: '请输入SMTP端口' }]}
              >
                <InputNumber min={1} max={65535} style={{ width: '100%' }} placeholder="587" />
              </Form.Item>

              <Form.Item
                name="smtpUsername"
                label="SMTP用户名"
                rules={[{ required: true, message: '请输入SMTP用户名' }]}
              >
                <Input placeholder="your-email@gmail.com" />
              </Form.Item>

              <Form.Item
                name="smtpPassword"
                label="SMTP密码"
                rules={[{ required: true, message: '请输入SMTP密码' }]}
              >
                <Input.Password placeholder="请输入SMTP密码" />
              </Form.Item>

              <Form.Item
                name="enableSsl"
                label="启用SSL"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableTls"
                label="启用TLS"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="testEmail"
                label="测试邮箱地址"
                rules={[
                  { required: true, message: '请输入测试邮箱地址' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input placeholder="test@example.com" />
              </Form.Item>

              <Form.Item>
                <Button 
                  type="dashed" 
                  onClick={handleTestEmail}
                  loading={testLoading}
                  icon={<MailOutlined />}
                >
                  发送测试邮件
                </Button>
              </Form.Item>
            </TabPane>

            <TabPane tab="发件人设置" key="sender">
              <Form.Item
                name="senderName"
                label="发件人名称"
                rules={[{ required: true, message: '请输入发件人名称' }]}
              >
                <Input placeholder="网站管理员" />
              </Form.Item>

              <Form.Item
                name="senderEmail"
                label="发件人邮箱"
                rules={[
                  { required: true, message: '请输入发件人邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input placeholder="admin@example.com" />
              </Form.Item>

              <Form.Item
                name="emailTemplate"
                label="邮件模板"
              >
                <Select placeholder="请选择邮件模板">
                  <Option value="default">默认模板</Option>
                  <Option value="modern">现代模板</Option>
                  <Option value="classic">经典模板</Option>
                  <Option value="custom">自定义模板</Option>
                </Select>
              </Form.Item>

              <Form.Item
                name="emailSignature"
                label="邮件签名"
              >
                <Input.TextArea rows={4} placeholder="请输入邮件签名" />
              </Form.Item>
            </TabPane>

            <TabPane tab="通知设置" key="notification">
              <Form.Item
                name="enableEmailNotification"
                label="启用邮件通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableWelcomeEmail"
                label="启用欢迎邮件"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enablePasswordResetEmail"
                label="启用密码重置邮件"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <div className="setting-description">
                <p>邮件通知功能说明：</p>
                <ul>
                  <li>启用邮件通知：系统将发送重要通知邮件</li>
                  <li>启用欢迎邮件：新用户注册时发送欢迎邮件</li>
                  <li>启用密码重置邮件：用户重置密码时发送验证邮件</li>
                </ul>
              </div>
            </TabPane>
          </Tabs>

          <Form.Item className="form-actions">
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              icon={<SaveOutlined />}
            >
              保存设置
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default EmailSettings;